import React, { useState } from 'react';
import styled from '@emotion/styled';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import Message from '@/utils/message';

const { TextArea } = Input;

interface ChatInputProps {
	onSearch: (message: string) => void;
}

const StyledChatInput = styled.div`
	display: flex;
	padding: 10px 0;
	background-color: #fff;
	width: 100%;
`;

const StyledInput = styled(TextArea)`
	flex: 1;
	margin-right: 10px;
`;

const StyledButton = styled.span`
	display: flex;
	justify-content: center;
	align-items: center;
	color: #252b48;
	border: none;
	background: none;
	cursor: pointer;
`;

const ChatInput: React.FC<ChatInputProps> = ({ onSearch }) => {
	const [message, setMessage] = useState('');

	const sendMessage = () => {
		if (message.trim() === '') {
			Message.warning('请输入问题');
			return;
		}
		onSearch(message.trim());
		setMessage('');
	};

	const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
		if (event.key === 'Enter') {
			event.preventDefault();
			sendMessage();
		}
	};

	return (
		<StyledChatInput>
			<StyledInput value={message} onChange={e => setMessage(e.target.value)} placeholder="请输入问题" rows={1} autoSize={{ minRows: 1, maxRows: 4 }} onKeyDown={handleKeyDown} />
			<StyledButton onClick={sendMessage}>
				<SearchOutlined />
			</StyledButton>
		</StyledChatInput>
	);
};

export default ChatInput;
